.border-box,
.footer,
.footer *,
.footer ::after,
.footer ::before,
.header,
.header *,
.header ::after,
.header ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a {
    text-decoration: none
}

li,
ol,
ul {
    list-style: none;
}

.act-box .container .viewer .tab-box .ctrl,
.agent-reg-box .reg-content-input-group,
.agent-reg-box .reg-content-selects,
.by-box .container .viewer .list,
.by-box .container .viewer .list .gamebox-by .gamebox-link,
.cp-box .container .viewer .tab-box .ctrl,
.cp-box .container .viewer .tab-box .main .game-box,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp,
.dj-box .container .list,
.dz-box .game-box,
.dz-box .game-box .gamebox-dz p.name,
.flex,
.footer .footer-bottom .container,
.footer .footer-bottom .container .footer-copyright,
.footer .footer-top .container,
.footer .footer-top ul.container li a,
.header .current-time,
.header .header-bottom .container,
.header .header-content .container,
.header .header-dropdown .nav-dropdown .drop-fw .fw-container,
.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk,
.header .header-list,
.header .header-list li a.d-flex,
.header .header-list li a.d-flex .title,
.header .header-over-top .container,
.header .nav,
.header .nav-link,
.header .player-info .player-hub .btn-recharge,
.header .player-info .player-hub .btn-transfer,
.header .player-info .player-hub .btn-withdraw,
.header .player-info .player-hub-icon,
.header .player-info .player-hub-link,
.header .player-info-row,
.home-box .fourth-content .hot-service,
.home-box .fourth-content .hot-service li,
.home-box .main-content .hotGame .hotlinks,
.home-box .second-content .phoneApp .content-box,
.home-box .second-content .phoneApp .content-box .l-box .app,
.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item p,
.home-box .third-content .hot-power .hot-power-list,
.notice-bar .notice-box,
.online-count,
.pushmsg-box .pushmsg-conrainer,
.qp-box .qp-game .tab_ctrl,
.reg-box .reg-content-input-group,
.reg-box .reg-content-selects,
.sp-box .container .viewer,
.tab-colum,
.tab-colum .tab_ctrl .tab_btn>a,
.txt-box .tab .custom-agent .article-box.visual,
.txt-box .tab .custom-agent .contact-box ul,
.txt-box .tab .custom-agent .contact-box ul li,
.txt-box .tab .custom-agent .pic-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.header .header-list li a.d-flex,
.justify-content-start,
.txt-box .tab .ctrl .icon {
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -ms-flex-pack: start;
    justify-content: start
}

.agent-reg-box .reg-content-buttons,
.agent-reg-box .reg-content-checkbox-group,
.dz-box .game-box .gamebox-dz p.name,
.footer .footer-bottom .container,
.footer .footer-top .container,
.header .header-list,
.header .nav-link,
.home-box .main-content .hotGame .hotlinks,
.home-box .second-content .phoneApp .content-box,
.justify-content-center,
.live-box .live-game .tab_ctrl .tab_btn,
.live-box .live-game .tab_main .tab_item,
.notice-bar .notice-box,
.qp-box .qp-game .tab_btn,
.reg-box .reg-content-buttons,
.reg-box .reg-content-checkbox-group {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.dz-box .game-box,
.header .header-content .container,
.header .header-over-top .container,
.header .nav,
.home-box .fourth-content .hot-service,
.home-box .fourth-content .hot-service li,
.justify-content-between,
.sp-box .container .viewer,
.tab-colum .tab_ctrl .tab_btn>a {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-evenly {
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.header .player-info-row,
.justify-content-end,
.qp-box .qp-game .tab_item {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.align-items-start,
.home-box .fourth-content .hot-service,
.home-box .second-content .phoneApp .content-box,
.home-box .second-content .phoneApp .content-box .l-box .app,
.home-box .third-content .hot-power .hot-power-list {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start
}

.act-box .container .viewer .tab-box .ctrl,
.agent-reg-box .reg-content-input-group,
.align-items-center,
.by-box .container .viewer .list .gamebox-by .gamebox-link,
.cp-box .container .viewer .tab-box .ctrl,
.dz-box .game-box .gamebox-dz p.name,
.footer .footer-bottom .container .footer-copyright,
.footer .footer-top .container,
.footer .footer-top ul.container li a,
.header .current-time,
.header .header-bottom .container,
.header .header-content .container,
.header .header-list,
.header .header-list li a.d-flex,
.header .header-list li a.d-flex .title,
.header .header-over-top .container,
.header .nav,
.header .nav-link,
.header .player-info .player-hub .btn-recharge,
.header .player-info .player-hub .btn-transfer,
.header .player-info .player-hub .btn-withdraw,
.header .player-info .player-hub-icon,
.header .player-info-row,
.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item p,
.live-box .live-game .tab_ctrl .tab_btn,
.live-box .live-game .tab_main .tab_item,
.notice-bar .notice-box,
.online-count,
.qp-box .qp-game .tab_btn,
.qp-box .qp-game .tab_item .content,
.reg-box .reg-content-input-group,
.tab-colum .tab_ctrl .tab_btn>a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.align-items-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end
}

.agent-reg-box .reg-content-box,
.agent-reg-box .reg-content-select,
.by-box .container .viewer .list .gamebox-by .gamebox-desp,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info,
.flex-col,
.header .header-navbar,
.header .player-info,
.home-box .fourth-content .hot-service .hot-service-r,
.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain,
.reg-box .reg-content-box,
.reg-box .reg-content-select {
    position: relative;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%;
    max-width: 100%
}

.flex-col-auto,
.header .nav-item,
.header .player-info .player-hub-item {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 100%
}

div#app {
    padding: 50px 0
}

#app {
    overflow: hidden;
    background: url(../imgs/bg-game.jpg) no-repeat center top #fff!important;
    background-attachment: fixed!important;
    background-size: cover!important
}

#app .game-container {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px
}

#app .history-wrap {
    border-top-right-radius: 12px
}

body.center-box #app {
    background-image: url(../imgs/bg-center.jpg)!important
}

.f16 {
    font-size: 16px
}

.f24 {
    font-size: 24px
}

.f30 {
    font-size: 30px
}

.f36 {
    font-size: 36px
}

.f48 {
    font-size: 48px
}

.mb12 {
    margin-bottom: 12px
}

.mb20 {
    margin-bottom: 20px
}

.mb48 {
    margin-bottom: 48px
}

.mr24 {
    margin-right: 24px
}

.pdl30 {
    padding-left: 30px
}

.w100 {
    width: 100%
}

.act-box .container .viewer .tab-box .ctrl,
.agent-reg-box .reg-content-input-group,
.agent-reg-box .reg-content-selects,
.by-box .container .viewer .list,
.by-box .container .viewer .list .gamebox-by .gamebox-link,
.cp-box .container .viewer .tab-box .ctrl,
.cp-box .container .viewer .tab-box .main .game-box,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp,
.dj-box .container .list,
.dz-box .game-box,
.dz-box .game-box .gamebox-dz p.name,
.flex,
.footer .footer-bottom .container,
.footer .footer-bottom .container .footer-copyright,
.footer .footer-top .container,
.footer .footer-top ul.container li a,
.header .current-time,
.header .header-bottom .container,
.header .header-content .container,
.header .header-dropdown .nav-dropdown .drop-fw .fw-container,
.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk,
.header .header-list,
.header .header-list li a.d-flex,
.header .header-list li a.d-flex .title,
.header .header-over-top .container,
.header .nav,
.header .nav-link,
.header .player-info .player-hub .btn-recharge,
.header .player-info .player-hub .btn-transfer,
.header .player-info .player-hub .btn-withdraw,
.header .player-info .player-hub-icon,
.header .player-info .player-hub-link,
.header .player-info-row,
.home-box .fourth-content .hot-service,
.home-box .fourth-content .hot-service li,
.home-box .main-content .hotGame .hotlinks,
.home-box .second-content .phoneApp .content-box,
.home-box .second-content .phoneApp .content-box .l-box .app,
.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item p,
.home-box .third-content .hot-power .hot-power-list,
.notice-bar .notice-box,
.online-count,
.pushmsg-box .pushmsg-conrainer,
.qp-box .qp-game .tab_ctrl,
.reg-box .reg-content-input-group,
.reg-box .reg-content-selects,
.sp-box .container .viewer,
.tab-colum,
.tab-colum .tab_ctrl .tab_btn>a,
.txt-box .tab .custom-agent .article-box.visual,
.txt-box .tab .custom-agent .contact-box ul,
.txt-box .tab .custom-agent .contact-box ul li,
.txt-box .tab .custom-agent .pic-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.flex-ali-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.focus {
    color: #fbe38e
}

.txt-black {
    color: #000
}

.focus-blue {
    color: #4474b0
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
    -webkit-transition: .35s;
    -o-transition: .35s;
    transition: .35s
}

.wrap {
    margin: 0 auto;
    width: 100%
}

.common-top {
    min-height: 50vh
}

.pop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%
}

.pop .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

.tab-colum {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-bottom: 60px;
    max-width: 100%;
    border: 1px solid #1b74c8;
    border-radius: 20px;
    background: #fff;
    overflow: hidden
}


/* .tab-colum .tab_ctrl {
    width: 20%;
    border-right: 1px solid #1b74c8
} */

.tab-colum .tab_ctrl {
    width: 100%;
    border-right: 1px solid #1b74c8
}

.tab-colum .tab_ctrl .tab_btn {
    position: relative;
    padding: 19px 0;
    border-bottom: 1px solid #ddd;
    color: #000;
    letter-spacing: .5px;
    font-size: 20px;
    cursor: pointer;
    -webkit-transition: .35s;
    -o-transition: .35s;
    transition: .35s
}

.tab-colum .tab_ctrl .tab_btn.active,
.tab-colum .tab_ctrl .tab_btn:hover {
    color: #30a1e1
}

.active a p {
    color: #30a1e1
}

.icon p:hover {
    color: #30a1e1
}


/* .tab-colum .tab_main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-height: 50vh
} */

.tab-colum .tab_main {
    -webkit-box-flex: revert;
    -webkit-flex: revert;
    -ms-flex: revert;
    flex: revert;
    min-height: 50vh
}

.pushmsg-box {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 700px;
    height: 400px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 18px rgba(255, 255, 255, .5);
    box-shadow: 0 0 18px rgba(255, 255, 255, .5);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.pushmsg-box *,
.pushmsg-box ::after,
.pushmsg-box ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.pushmsg-box.blue {
    background-color: #141b49
}

.pushmsg-box.blue .title_box {
    border-bottom: 1px solid #fff;
    background-color: #141b49
}

.pushmsg-box.red {
    background-color: #7c1514
}

.pushmsg-box.red .title_box {
    background-color: #ab2626
}

.pushmsg-box.light-blue {
    background-color: #1073b2;
    -webkit-box-shadow: none;
    box-shadow: none
}

.pushmsg-box.light-blue .title_box {
    background-color: #1980ba
}

.pushmsg-box .title_box {
    padding: 5px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 31px
}

.pushmsg-box .pushmsg-conrainer {
    height: 320px
}

.pushmsg-box .pushmsg-conrainer .pushmsg-leftBtn {
    width: 160px;
    height: 100%;
    border-right: 1px solid #fff
}

.pushmsg-box .pushmsg-conrainer .pushmsg-leftBtn .l_btn {
    padding: 12px 20px;
    color: #fff;
    font-size: 14px;
    cursor: pointer
}

.pushmsg-box .pushmsg-conrainer .pushmsg-leftBtn .l_btn.active,
.pushmsg-box .pushmsg-conrainer .pushmsg-leftBtn .l_btn:hover {
    background: #fdf77f;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fdf77f), to(#fdde4c));
    background: -o-linear-gradient(bottom, #fdf77f 0, #fdde4c 100%);
    background: linear-gradient(to top, #fdf77f 0, #fdde4c 100%);
    color: #000
}

.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain {
    height: 100%
}

.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain .r_contain {
    overflow: auto;
    padding: 20px;
    height: 100%
}

.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain .r_contain h6 {
    margin-bottom: 8px;
    color: #fff;
    font-size: 16px
}

.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain .r_contain p {
    color: #fff;
    line-height: 1.67
}

.pushmsg-box .pushmsg-conrainer .pushmsg-rightContain .r_contain li {
    margin-bottom: 20px
}

.pushmsg-box .exitBtn {
    padding: 10px 0;
    border-top: 1px solid #fff;
    color: #fff;
    text-align: center;
    font-size: 16px;
    cursor: pointer
}

.lb {
    position: relative;
    margin: 0 auto;
    background: #000;
    text-align: center;
    min-width: 100%;
    height: 600px
}

.lb a {
    position: relative;
    top: 50%;
    left: 50%;
    display: block;
    width: 1920px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.lb img {
    max-width: 100%
}

.lb.swiper-container a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.lb .swiper-pagination-clickable {
    bottom: 80px
}

.header {
    position: relative;
    z-index: 99;
    width: 100%
}

.header .shrink {
    position: absolute;
    bottom: -100px;
    left: 50%;
    z-index: 3;
    display: none;
    margin-left: -817px;
    width: 90px;
    height: 101px;
    background: url(./../imgs/all_up.gif) no-repeat
}

.header .shrink .shrink_btn {
    position: relative;
    display: block;
    margin: 10px;
    width: 30px;
    height: 60px;
    background: url(./../imgs/Untitled_000.png) no-repeat
}

.header .shrink .shrink_btn.shrink_down {
    background: url(./../imgs/Untitled_01.png) no-repeat
}

.header.header-hide {
    top: -190px
}

.header .container {
    margin: 0 auto;
    width: 100%
}

.header .header-over-top {
    width: 100%;
    background: #1c8ac1
}

.header .header-over-top .container {
    height: 50px
}

.header .header-content {
    width: 100%;
    background: #1b74c8
}

.header .header-content .container {
    padding: 0 10px;
    height: 130px
}

.header .header-bottom {
    width: 100%;
    background: #005d92
}

.header .header-bottom .container {
    padding: 20px 10px;
    height: 120px
}

.header .current-time {
    color: #fff
}

.header .current-time-span {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1px solid #fff
}

.header .player-info {
    position: relative;
    height: 100%
}

.header .player-info-box {
    height: 100%
}

.header .player-info-row {
    height: 100%
}

.header .player-info-button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 5px 0 0;
    padding: 0 20px;
    min-width: 90px;
    height: 32px;
    outline: 0;
    border: 0;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: inherit;
    line-height: 30px
}

.header .player-info-button:hover::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    content: ''
}

.header .player-info-button.button-green {
    background: #33c85d
}

.header .player-info-button.button-blue {
    background: #1671c4;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1671c4), to(#76f6fe));
    background: -o-linear-gradient(bottom, #1671c4 0, #76f6fe 100%);
    background: linear-gradient(to top, #1671c4 0, #76f6fe 100%)
}

.header .player-info-button.button-purple {
    background: #7461fb;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7461fb), to(#60a3cd));
    background: -o-linear-gradient(bottom, #7461fb 0, #60a3cd 100%);
    background: linear-gradient(to top, #7461fb 0, #60a3cd 100%)
}

.header .player-info .player-login-item {
    position: relative;
    margin-right: 5px
}

.header .player-info .player-login-item+.player-info-button {
    margin-left: 10px
}

.header .player-info .player-login-input {
    padding: 5px 20px;
    width: 150px;
    height: 30px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    -webkit-transition: background .15s, border .15s;
    -o-transition: background .15s, border .15s;
    transition: background .15s, border .15s
}

.header .player-info .player-login-input:focus {
    background: #ddd
}

.header .player-info .player-login-icon {
    position: relative
}

.header .player-info .player-login-icon [class*=player-login-icon-] {
    position: absolute;
    top: 0;
    left: 1px;
    width: 35px;
    height: 100%
}

.header .player-info .player-login-icon [class*=player-login-icon-]+.player-login-input {
    padding-left: 35px
}

.header .player-info .player-login-icon-user {
    background: url(../imgs//icon-user.png) no-repeat center transparent
}

.header .player-info .player-login-icon-password {
    background: url(../imgs//icon-password.png) no-repeat center transparent
}

.header .player-info .player-login-valid {
    position: relative
}

.header .player-info .player-login-valid-box {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 72px;
    height: 24px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .player-info .player-login-valid-box+.player-login-input {
    padding-left: 75px
}

.header .player-info .player-login-valid-code-number {
    display: inline-block;
    padding: 0 3px;
    width: 60px;
    height: 100%;
    background: #fff;
    color: #2161b4;
    vertical-align: middle;
    font-size: 16px
}

.header .player-info .player-login-valid-code-number::before {
    display: inline-block;
    margin-top: 3px;
    width: 0;
    height: 100%;
    content: '';
    vertical-align: middle
}

.header .player-info .player-login-valid-code {
    display: inline-block;
    width: 60px;
    height: 100%
}

.header .player-info .player-login-valid-code img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.header .player-info .player-login-link {
    padding: 0 20px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    line-height: 32px
}

.header .player-info .player-login-link:hover {
    color: #acaaaa
}

.header .player-info .player-hub {
    color: #fff
}

.header .player-info .player-hub-link {
    padding: 5px 7px
}

.header .player-info .player-hub-link.pr-sm {
    padding-right: 1px
}

.header .player-info .player-hub-link.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.header .player-info .player-hub-link:hover {
    color: #acaaaa
}

.header .player-info .player-hub-icon {
    padding-top: 0;
    padding-bottom: 0
}

.header .player-info .player-hub-icon [class*=player-hub-icon-] {
    display: inline-block;
    margin: 0 3px;
    width: 26px;
    height: 26px
}

.header .player-info .player-hub-icon-user {
    background: url(../imgs//icon-user.png) no-repeat center transparent
}

.header .player-info .player-hub-icon-reload {
    background: url(../imgs//icon-reload.png) no-repeat center transparent
}

.header .player-info .player-hub-icon-logout {
    background: url(../imgs//icon-logout.png) no-repeat center transparent
}

.header .player-info .player-hub .player-info-button {
    display: block;
    margin: 0 0 0 15px
}

.header .player-info .player-hub .player-info-button.player-hub-icon [class*=player-hub-icon-] {
    margin-left: -3px
}

.header .player-info .player-hub-span {
    display: inline-block;
    height: 15px;
    border-left: 1px solid #fff;
    opacity: .5
}

.header .player-info .player-hub .btn-logout {
    background: #129cd6
}

.header .player-info .player-hub .btn-recharge,
.header .player-info .player-hub .btn-transfer,
.header .player-info .player-hub .btn-withdraw {
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 5px
}

.header .player-info .player-hub .btn-recharge:after,
.header .player-info .player-hub .btn-transfer:after,
.header .player-info .player-hub .btn-withdraw:after {
    content: none
}

.header .player-info .player-hub .btn-recharge:hover,
.header .player-info .player-hub .btn-transfer:hover,
.header .player-info .player-hub .btn-withdraw:hover {
    -webkit-filter: brightness(.9);
    filter: brightness(.9)
}

.header .player-info .player-hub .btn-recharge img,
.header .player-info .player-hub .btn-transfer img,
.header .player-info .player-hub .btn-withdraw img {
    margin-right: 5px;
    width: 20px;
    height: 16px
}

.header .player-info .player-hub .btn-recharge {
    background: #0eb779
}

.header .player-info .player-hub .btn-withdraw {
    background: #f58521
}

.header .player-info .player-hub .btn-transfer {
    background: #66bdff
}

.header .platform-logo {
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 100%
}

.header .platform-logo img {
    position: absolute;
    top: 50%;
    display: inline-block;
    max-width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .header-navbar {
    margin-left: 20px;
    height: 100%
}

.header .nav {
    height: 100%
}

.header .nav-item {
    position: relative
}

.header .nav-item.hot-item::before {
    position: absolute;
    top: 17px;
    left: 85%;
    width: 30px;
    height: 30px;
    background: url(../imgs//icon-hot.png) no-repeat center transparent;
    content: '';
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none
}

.header .nav-link {
    width: 100%;
    height: 100%;
    font-size: 0;
    cursor: pointer;
    -webkit-transition: background-image .3s;
    -o-transition: background-image .3s;
    transition: background-image .3s
}

.header .nav-link *,
.header .nav-link::after,
.header .nav-link::before {
    cursor: pointer
}

.header .nav-link.active .nav-icon,
.header .nav-link:hover .nav-icon {
    color: #f5f60c
}

.header .nav-link.active .nav-icon-home,
.header .nav-link:hover .nav-icon-home {
    background-position: 0 -80px
}

.header .nav-link.active .nav-icon-lottery,
.header .nav-link:hover .nav-icon-lottery {
    background-position: -40px -80px
}

.header .nav-link.active .nav-icon-live,
.header .nav-link:hover .nav-icon-live {
    background-position: -120px -80px
}

.header .nav-link.active .nav-icon-slots,
.header .nav-link:hover .nav-icon-slots {
    background-position: -160px -80px
}

.header .nav-link.active .nav-icon-by,
.header .nav-link:hover .nav-icon-by {
    background-position: -40px -120px
}

.header .nav-link.active .nav-icon-sport,
.header .nav-link:hover .nav-icon-sport {
    background-position: -80px -80px
}

.header .nav-link.active .nav-icon-board,
.header .nav-link:hover .nav-icon-board {
    background-position: 0 -120px
}

.header .nav-link.active .nav-icon-dj,
.header .nav-link:hover .nav-icon-dj {
    background-position: -40px -120px
}

.header .nav-link.active .nav-icon-activity,
.header .nav-link:hover .nav-icon-activity {
    background-position: -120px -120px
}

.header .nav-link.active .nav-icon-cskh,
.header .nav-link:hover .nav-icon-cskh {
    background-image: url(../imgs//icon-nav-cskh-h.png)!important
}

.header .nav-icon {
    padding: 0 8px;
    width: 100%;
    height: 100%;
    color: #e5e5e5;
    vertical-align: middle;
    text-align: center
}

.header .nav-icon .nav-icon-text {
    display: block;
    margin-top: 5px;
    padding: 0 13px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    line-height: normal
}

.header .nav-icon [class*=nav-icon-]:not(.nav-icon-text) {
    display: block;
    -webkit-box-sizing: content-box!important;
    box-sizing: content-box!important;
    margin: 0 auto 0 auto;
    width: 40px;
    height: 40px;
    background-color: transparent;
    background-image: url(../imgs//icon-nav-sprites-2n.png);
    background-repeat: no-repeat
}

.header .nav-icon [class*=nav-icon-]:not(.nav-icon-text)+.nav-icon-text {
    margin-top: 7px
}

.header .nav-icon-home {
    background-position: 0 0
}

.header .nav-icon-lottery {
    background-position: -40px 0
}

.header .nav-icon-live {
    background-position: -120px 0
}

.header .nav-icon-slots {
    background-position: -160px 0
}

.header .nav-icon-by {
    background-position: -40px -40px
}

.header .nav-icon-sport {
    background-position: -80px 0
}

.header .nav-icon-board {
    background-position: 0 -40px
}

.header .nav-icon-dj {
    background-position: 80px -40px
}

.header .nav-icon-activity {
    background-position: -120px -40px
}

.header .nav-icon-cskh {
    background-image: url(../imgs//icon-nav-cskh-n.png)!important;
    background-position: center
}

.header .header-dropdown {
    position: relative;
    z-index: 10;
    width: 100%
}

.header .header-dropdown .nav-dropdown {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    background: #0f70aa;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.header .header-dropdown .nav-dropdown .drop-fw {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
    max-height: 0;
    width: 100%;
    background: #1073ad;
    -webkit-transition: max-height .35s;
    -o-transition: max-height .35s;
    transition: max-height .35s
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-container {
    position: relative;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 20px 0;
    background: #0f70aa;
    max-width: 100%
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item {
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
    margin-left: 0;
    padding: 0 8px;
    width: auto;
    color: #fff;
    text-align: left;
    font-size: 13px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .title-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .title-box select {
    margin: 0 22px 0 8px;
    padding: 0;
    width: 78px;
    height: 23px;
    border: solid 1px #ffab06;
    border-radius: 3px;
    background-color: transparent;
    color: #ffab03;
    font-size: 14px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .title-box .select-box {
    position: relative;
    margin: 0 22px 0 8px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .title-box .select-box select {
    margin: 0;
    padding: 0 1.5em 0 3px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .title-box .select-box::after {
    position: absolute;
    top: calc(50% - .15em);
    right: .35em;
    display: block;
    border-width: .4em .4em 0 .4em;
    border-style: solid;
    border-color: #ffab03 transparent transparent transparent;
    content: ''
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item h3 {
    padding: 0 0 0 8px;
    width: 100%;
    height: 40px;
    color: #ffcb03;
    font-weight: 400;
    font-size: 17px;
    line-height: 40px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item a,
.header .header-dropdown .nav-dropdown .drop-fw .fw-item h3 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 360px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk .hot::after {
    position: relative;
    top: -10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../imgs//icon-hot.png) no-repeat center;
    background-size: 100%;
    content: ''
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk a,
.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk span {
    color: #fff;
    text-align: left;
    font-size: 14px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk a {
    position: relative;
    display: inline-block;
    overflow: visible;
    margin-bottom: 4px;
    padding: 0 8px;
    height: 25px;
    line-height: 25px
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk a:hover {
    background: #0f589a;
    color: #ff0
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk a:hover span {
    color: #ff0
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item .fw-blk a.game-hot::after {
    position: absolute;
    top: 0;
    z-index: 9;
    display: inline-block;
    margin-left: 2px;
    width: 23px;
    height: 17px;
    background: url(../imgs//icon-hot.png) no-repeat center;
    background-size: 100%;
    content: ''
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-item:last-of-type,
.header .header-dropdown .nav-dropdown .drop-fw .fw-item:nth-child(6n) {
    border-right: none
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-span {
    display: inline-block;
    width: 2px;
    background: #5f98da
}

.header .header-dropdown .nav-dropdown .drop-fw .fw-span:last-child {
    display: none
}

.header .header-dropdown .nav-dropdown .drop-fw.open,
.header .header-dropdown .nav-dropdown .drop-fw:hover {
    z-index: 3;
    max-height: 1000px;
    -webkit-transition: max-height .8s;
    -o-transition: max-height .8s;
    transition: max-height .8s
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] {
    background: 0 0
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-container {
    padding-top: 12px;
    padding-bottom: 24px;
    max-width: 100%;
    background: #0f70aa
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-row-box {
    margin-top: 17px;
    width: 100%
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-row-box:first-child {
    margin-top: 0
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-row {
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    width: 100%
}


/* .header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-game {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    max-width: 320px;
    width: 100%
} */

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-icon {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    text-align: center
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-icon .fw-item-img-i {
    display: block;
    margin: 0 auto
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-icon span {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 16px
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-icon .btn {
    margin: 0;
    padding: 6px 8px;
    border-radius: 35px;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3551a4), to(#2c8ec4));
    background: -o-linear-gradient(bottom, #3551a4 0, #2c8ec4 100%);
    background: linear-gradient(0deg, #3551a4 0, #2c8ec4 100%);
    font-size: 12px
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-link {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    height: 100%
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-link.wait {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-link.wait .fw-item-icon>div {
    width: 100%;
    height: 100%
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-link.wait .fw-item-icon span {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.8
}

.header .header-dropdown .nav-dropdown [class*=drop-fw-game-] .fw-item-link:not(.wait):hover {
    -webkit-filter: brightness(120%);
    filter: brightness(120%)
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-container {
    padding: 0 0 15px 0;
    max-width: 100%
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-game {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* max-width: 500px; */
    width: auto
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-img {
    margin-right: 5px;
    /* max-width: 308px */
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    height: auto
}

.agent-reg-box .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.reg-content-box,
.agent-reg-box .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.reg-content-select,
.by-box .container .viewer .list .gamebox-by .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.gamebox-desp,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.info,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .agent-reg-box .fw-item-icon>.reg-content-box,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .agent-reg-box .fw-item-icon>.reg-content-select,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .by-box .container .viewer .list .gamebox-by .fw-item-icon>.gamebox-desp,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .fw-item-icon>.info,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.flex-col,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.header-navbar,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.player-info,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .home-box .fourth-content .hot-service .fw-item-icon>.hot-service-r,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .pushmsg-box .pushmsg-conrainer .fw-item-icon>.pushmsg-rightContain,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .reg-box .fw-item-icon>.reg-content-box,
.header .header-dropdown .nav-dropdown .drop-fw-game-qp .reg-box .fw-item-icon>.reg-content-select,
.home-box .fourth-content .hot-service .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.hot-service-r,
.pushmsg-box .pushmsg-conrainer .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.pushmsg-rightContain,
.reg-box .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.reg-content-box,
.reg-box .header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon>.reg-content-select {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-icon span {
    margin: 10px 0
}

.header .header-dropdown .nav-dropdown .drop-fw-game-qp .fw-item-link {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.header .header-list {
    overflow: hidden;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%
}

.header .header-list li {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    padding: 0 10px;
    height: 100%
}

.header .header-list li a.d-flex {
    margin: 0 0 10px 0;
    color: #e5e5e5;
    font-size: 13px
}

.header .header-list li a.d-flex:last-child {
    margin: 0
}

.header .header-list li a.d-flex .title {
    margin-right: 15px;
    color: #c5faff;
    font-size: 13px
}

.header .header-list li a.d-flex .title.mr-sm {
    margin-right: 10px
}

.header .header-list li a.d-flex .title img {
    display: block
}

.header .header-list li a.d-flex .title .no-icon {
    display: block;
    height: 30px
}

.header .header-list li:not(:last-child) {
    padding-right: 20px
}

.header .header-list li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 1px;
    height: 40px;
    background: #6cc1f0;
    content: '';
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .header-list li .hide {
    display: none
}

.header .header-list li .vn-date .bl {
    padding: 0 3px
}

.header .current-time {
    color: #e5e5e5
}

.header .current-time-span {
    display: inline-block;
    margin: 0 5px;
    height: 12px;
    border-left: 1px solid #e5e5e5
}

.footer {
    position: relative;
    overflow: hidden
}

.footer .container {
    margin: 0 auto;
    width: 100%
}

.footer .footer-top {
    position: relative;
    padding: 30px 0;
    width: 100%;
    background: #2290d2
}

.footer .footer-top ul.container {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%
}

.footer .footer-top ul.container li {
    position: relative;
    padding: 10px 18px;
    color: #fff;
    text-transform: uppercase;
    line-height: 60px
}

.footer .footer-top ul.container li a {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.footer .footer-bottom {
    position: relative;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #1980ba;
    color: #fff
}

.footer .footer-bottom .container {
    margin: 0 auto;
    text-align: center;
    width: 100%
}

.footer .footer-bottom .container .footer-copyright {
    position: relative;
    padding: 10px 0 13px 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px
}

#notice-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    min-width: 100%;
    min-height: 100%;
    background: rgba(12, 12, 12, .65)
}

.notice-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40%;
    border-radius: 10px;
    background: #fff;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.notice-modal .modal-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #d2d2d2;
    color: #3880e2;
    font-size: 18px
}

.notice-modal .modal-head .icon {
    margin-right: 5px;
    vertical-align: middle
}

.notice-modal .modal-content {
    overflow-y: auto;
    margin: 20px 0;
    padding: 0 30px;
    max-height: 400px;
    color: #333;
    line-height: 1.5
}

.notice-modal .modal-content span {
    color: #3880e2
}

.notice-modal .modal-btn {
    display: block;
    margin: 20px auto;
    padding: 0 20px;
    /* max-width: 200px; */
    height: 42px;
    border-radius: 5px;
    background: #1ca2fe;
    color: #fff;
    font-size: 18px;
    cursor: pointer
}

#video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: none;
    min-width: 100%;
    min-height: 100%;
    background: rgba(12, 12, 12, .65)
}

.video-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.video-modal .modal-content video {
    width: 100%
}

.video-modal .modal-content .close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #2eb9ff;
    -webkit-box-shadow: 2px 2px 2px rgba(12, 12, 12, .45);
    box-shadow: 2px 2px 2px rgba(12, 12, 12, .45);
    cursor: pointer
}

.video-modal .modal-content .close:hover {
    background: #67cbfc
}

.video-modal .modal-content .close:after,
.video-modal .modal-content .close:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 60%;
    background: #fff;
    content: '';
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.video-modal .modal-content .close:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.video-modal .modal-content .close:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.notice-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 10px;
    width: 100%;
    height: 60px;
    background: #0000005c;
    color: #fff;
    font-size: 16px;
    line-height: 40px
}

.notice-bar .notice-box {
    max-width: 100%;
    height: 100%
}

.notice-bar .icon {
    margin-right: .5em
}

.notice-bar .notice {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%
}

.home-box .one-two-content {
    width: 100%;
    background: url(./../img/home/one/bg.jpg) no-repeat center top
}

.home-box .one-two-content .title {
    padding: 50px 0;
    width: 100%;
    color: #30a1e1;
    text-align: center;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 45px
}

.home-box .main-content .hotGame .hotlinks {
    padding: 0 20px;
    text-align: center
}

.home-box .main-content .hotGame .hotlinks .box {
    position: relative;
    padding: 0 10px;
    width: 20%
}

.home-box .main-content .hotGame .hotlinks .box .link {
    position: relative;
    display: block;
    width: 100%
}

.home-box .main-content .hotGame .hotlinks .box .front {
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: rotateY(0);
    transform: rotateY(0)
}

.home-box .main-content .hotGame .hotlinks .box .front img {
    display: block;
    width: 100%
}

.home-box .main-content .hotGame .hotlinks .box .btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -90px;
    padding: 10px;
    width: 180px;
    border: 5px #fffbfbe8 solid;
    border-radius: 10px;
    background: #30a1e1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    opacity: .8
}

.home-box .main-content .hotGame .hotlinks .box:hover .btn {
    -webkit-filter: brightness(130%);
    filter: brightness(130%)
}

.home-box .main-content .hotGame .hotlinks .box:hover .front {
    -webkit-transform: rotateY(180deg) scaleX(-1);
    transform: rotateY(180deg) scaleX(-1)
}

.home-box .second-content .phoneApp .content-box {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0 20px
}

.home-box .second-content .phoneApp .content-box .r-box {
    margin-left: 30px
}

.home-box .second-content .phoneApp .content-box .l-box {
    width: 45%
}

.home-box .second-content .phoneApp .content-box .l-box .txt-boxs p {
    color: #838383;
    font-size: 18px;
    line-height: 2
}

.home-box .second-content .phoneApp .content-box .l-box .app {
    padding: 20px;
    width: 100%
}

.home-box .second-content .phoneApp .content-box .l-box .app .qr-code {
    position: relative
}

.home-box .second-content .phoneApp .content-box .l-box .app .qr-code .qr-bg {
    display: block
}

.home-box .second-content .phoneApp .content-box .l-box .app .qr-code .qr-img {
    position: absolute;
    top: 13px;
    left: 13px;
    display: block;
    width: calc(100% - 26px);
    height: calc(100% - 23px)
}

.home-box .second-content .phoneApp .content-box .l-box .app .qr-code .qr-img img {
    width: 100%;
    height: 100%
}

.home-box .second-content .phoneApp .content-box .l-box .app .app-info {
    margin-left: 40px
}

.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item {
    width: 100%
}

.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item p {
    padding: 5px 10px;
    width: 100%;
    border-radius: 10px;
    background: #2290d2;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 40px
}

.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item p img {
    display: block
}

.home-box .second-content .phoneApp .content-box .l-box .app .app-info .app-info-item>span {
    line-height: 2
}

.home-box .third-content .hot-power {
    width: 100%;
    height: 418px;
    background: url(./../img/home/third/bg.jpg) no-repeat center top
}

.home-box .third-content .hot-power .hot-power-title {
    padding: 50px 0;
    width: 100%;
    color: #30a1e1;
    text-align: center;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 45px
}

.home-box .third-content .hot-power .hot-power-list li {
    width: 25%;
    text-align: center
}

.home-box .third-content .hot-power .hot-power-list li img {
    margin-bottom: 1px
}

.home-box .third-content .hot-power .hot-power-list li span {
    display: block;
    width: 100%;
    color: #1980ba;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 22px
}

.home-box .fourth-content {
    padding: 50px 0;
    width: 100%;
    background: #fff
}

.home-box .fourth-content .hot-service li {
    padding: 10px;
    /* max-width: 350px; */
    width: 25%
}

.home-box .fourth-content .hot-service .hot-service-l {
    width: 135px;
    text-align: center
}

.home-box .fourth-content .hot-service .hot-service-l img {
    margin-bottom: 3px
}

.home-box .fourth-content .hot-service .hot-service-l span {
    display: block;
    width: 100%;
    color: #1980ba;
    text-transform: uppercase;
    font-size: 18px
}

.home-box .fourth-content .hot-service .hot-service-r {
    margin-left: 10px;
    color: #838383;
    font-size: 14px;
    line-height: 20px
}

.online-count .online-count-clear {
    cursor: pointer
}

.online-count .online-count-clear>img {
    display: block
}

.online-count .online-count-show span {
    display: inline-block;
    margin-right: 3px;
    padding: 0 6px;
    height: 30px;
    background: #6cc1f0;
    color: #fff;
    font-size: 18px;
    line-height: 30px
}

.online-count .online-count-show span:last-child {
    margin-right: 0
}

.app-box {
    padding: 50px 0 130px 0;
    background: url(../img/download/bg.jpg) no-repeat center;
    background-size: cover
}

.app-box .intro {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 50px;
    padding-top: 50px
}

.app-box .intro img.mobile {
    margin: 0 10px
}

.app-box .intro .info {
    margin-left: 70px;
    width: 710px
}

.app-box .intro .info .btns {
    text-align: left
}

.app-box .intro .info .btns a.btn {
    display: inline-block;
    margin-right: 30px;
    padding: 15px 30px;
    border-radius: 40px;
    background: #2290d2;
    color: #fff;
    font-size: 25px
}

.app-box .intro .info article {
    float: left;
    margin-top: 30px;
    width: 100%;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 2
}

.app-box h3 {
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 42px
}

.app-box h3,
.app-box h4 {
    color: #2290d2;
    text-align: center;
    text-transform: uppercase
}

.app-box h4 {
    margin: 55px auto 34px;
    font-size: 36px
}

.app-box img.steps {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.reg-box {
    padding: 50px 0;
    background: url(../imgs//bg-reg.jpg) no-repeat center top;
    background-size: cover;
    color: #fff
}

.reg-box .reg-content {
    border-radius: 20px;
    background: #30a1e1
}

.agent-reg-box {
    color: #30a1e1
}

.agent-reg-box .reg-content-input {
    border: 1px solid #30a1e1!important
}

.agent-reg-box,
.reg-box {
    width: 100%
}

.agent-reg-box .reg-content,
.reg-box .reg-content {
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 30px 25px;
    width: 720px
}

.agent-reg-box .reg-content-title,
.reg-box .reg-content-title {
    padding: 0 0 30px 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 36px;
    line-height: 50px
}

.agent-reg-box .reg-content-wrap,
.reg-box .reg-content-wrap {
    width: 100%
}

.agent-reg-box .reg-content-input-group,
.reg-box .reg-content-input-group {
    margin-bottom: 15px
}

.agent-reg-box .reg-content-label,
.reg-box .reg-content-label {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 240px;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 30px
}

.agent-reg-box .reg-content-box,
.reg-box .reg-content-box {
    position: relative;
    margin-left: 10px
}

.agent-reg-box .reg-content .chk,
.reg-box .reg-content .chk {
    position: relative
}

.agent-reg-box .reg-content .chk::before,
.reg-box .reg-content .chk::before {
    margin-right: 3px;
    color: red;
    content: '*'
}

.agent-reg-box .reg-content-input,
.reg-box .reg-content-input {
    padding: 3px 10px;
    width: 100%;
    height: 36px;
    outline: 0;
    border: 0;
    border-radius: 5px;
    color: #000
}

.agent-reg-box .reg-content-selects,
.reg-box .reg-content-selects {
    width: 100%;
    height: 36px
}

.agent-reg-box .reg-content-select,
.reg-box .reg-content-select {
    margin-right: 5px;
    padding: 3px 5px;
    height: 100%;
    border-radius: 6px;
    color: #000
}

.agent-reg-box .reg-content-select:last-child,
.reg-box .reg-content-select:last-child {
    margin-right: 0
}

.agent-reg-box .reg-content-tip,
.reg-box .reg-content-tip {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 24px
}

.agent-reg-box .reg-content-checkcode,
.reg-box .reg-content-checkcode {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 100px;
    height: calc(100% - 4px)
}

.agent-reg-box .reg-content-checkcode a,
.reg-box .reg-content-checkcode a {
    display: block;
    width: 100%;
    height: 100%
}

.agent-reg-box .reg-content-checkcode a img,
.reg-box .reg-content-checkcode a img {
    display: block;
    width: 100%;
    height: 100%
}

.agent-reg-box .reg-content-checkcode+.reg-content-input,
.reg-box .reg-content-checkcode+.reg-content-input {
    padding-right: calc(100px + 5px)
}

.agent-reg-box .reg-content-checkbox-group,
.reg-box .reg-content-checkbox-group {
    margin: 0;
    padding: 15px 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 20px
}

.agent-reg-box .reg-content-checkbox,
.reg-box .reg-content-checkbox {
    margin: 0 5px
}

.agent-reg-box .reg-content-checkbox+.reg-content-tip,
.reg-box .reg-content-checkbox+.reg-content-tip {
    display: inline;
    width: auto;
    font-size: 14px;
    line-height: 20px
}

.agent-reg-box .reg-content-buttons,
.reg-box .reg-content-buttons {
    margin: 0
}

.agent-reg-box .reg-content-button,
.reg-box .reg-content-button {
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    padding: 10px 30px;
    width: 350px;
    border: 0;
    border-radius: 30px;
    background: #67c6fc;
    color: #fff;
    text-align: center;
    font-size: 32px;
    cursor: pointer
}

.agent-reg-box .reg-content-button:hover::after,
.reg-box .reg-content-button:hover::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    content: ''
}

.agent-reg-box .reg-content-button-sms,
.reg-box .reg-content-button-sms {
    position: absolute;
    top: 1px;
    right: 1px;
    margin: 0;
    width: auto;
    font-size: 12px;
    background: -webkit-gradient(linear, left bottom, left top, from(#ec890b), to(#fed236));
    background: -o-linear-gradient(bottom, #ec890b, #fed236);
    background: linear-gradient(to top, #ec890b, #fed236)
}

.agent-reg-box .reg-content .button-disable,
.reg-box .reg-content .button-disable {
    -webkit-filter: brightness(.8);
    filter: brightness(.8);
    cursor: not-allowed
}

.agent-reg-box .reg-content .button-enable,
.reg-box .reg-content .button-enable {
    -webkit-filter: brightness(1);
    filter: brightness(1);
    cursor: pointer
}

.agent-reg-box .reg-content .button-yellow,
.reg-box .reg-content .button-yellow {
    color: #000;
    background: #fdf7ac;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fdf7ac), to(#f1c95a));
    background: -o-linear-gradient(bottom, #fdf7ac 0, #f1c95a 100%);
    background: linear-gradient(to top, #fdf7ac 0, #f1c95a 100%)
}

.about-box .tab .ctrl .icon [class*=icon-],
.safety .tab .ctrl .icon [class*=icon-] {
    width: 30px;
    height: 30px;
    background-image: url(../imgs//icon-abouts.png)
}

.about-box .tab .ctrl .icon-about,
.safety .tab .ctrl .icon-about {
    background-position: 0 0
}

.about-box .tab .ctrl .icon-aphone,
.safety .tab .ctrl .icon-aphone {
    background-position: -30px 0
}

.about-box .tab .ctrl .icon-money,
.safety .tab .ctrl .icon-money {
    background-position: -60px 0
}

.about-box .tab .ctrl .icon-getmoney,
.safety .tab .ctrl .icon-getmoney {
    background-position: -90px 0
}

.about-box .tab .ctrl .icon-qa,
.safety .tab .ctrl .icon-qa {
    background-position: -120px 0
}

.about-box .tab .ctrl .icon-safety,
.safety .tab .ctrl .icon-safety {
    background-position: -150px 0
}

.about-box .tab .ctrl .icon:hover [class*=icon-],
.safety .tab .ctrl .icon:hover [class*=icon-] {
    background-position-y: -30px
}

.about-box .tab .ctrl .tab-button.active .icon [class*=icon-],
.safety .tab .ctrl .tab-button.active .icon [class*=icon-] {
    background-position-y: -30px
}

.txt-box .tab .ctrl {
    /* padding: 10px */
}

.txt-box .tab .ctrl .icon [class*=icon-] {
    display: block;
    background-repeat: no-repeat
}

.txt-box .tab .ctrl .tab-button {
    float: left;
    display: block;
    padding: 0 10px;
    -webkit-transition: .15s;
    -o-transition: .15s;
    transition: .15s
}

.txt-box .tab .ctrl .tab-button a {
    /* padding-top: 15px;
    padding-bottom: 15px */
}

.txt-box .tab .main .tab_item {
    padding: 20px 20px 10px;
    color: #000;
    font-size: 14px;
    line-height: 1.35rem
}

.txt-box .tab .main .tab_item li {
    margin-bottom: 1.5em
}

.txt-box .tab .main .tab_item p {
    margin-bottom: 10px
}

.txt-box .tab .main .tab_item .tit {
    color: #30a1e1;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.3rem
}

.txt-box .tab .main .tab_item .focus {
    color: #e63220
}

.txt-box .tab .main .tab_item .bold {
    font-weight: 700
}

.txt-box .tab .main .tab_item .txt-title {
    padding: 30px 0;
    width: 100%;
    color: #7db5db;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 36px;
    line-height: 50px
}

.txt-box .tab .main .tab_item .txt-backward {
    padding-left: 40px;
    text-indent: -10px
}

.txt-box .tab .custom-agent {
    padding-top: 65px!important;
    padding-bottom: 30px!important;
    color: #0a46a0!important;
    text-align: center;
    font-size: 20px!important;
    background: url(../img/agent/bg.jpg) center/100% 100% no-repeat;
    letter-spacing: 1px
}

.txt-box .tab .custom-agent .focus {
    margin: 10px 0;
    font-size: 22px
}

.txt-box .tab .custom-agent h2 {
    margin: 0 0 22px 0;
    font-size: 50px
}

.txt-box .tab .custom-agent h3,
.txt-box .tab .custom-agent h4 {
    margin: 15px 0;
    font-size: 27px;
    font-weight: 300
}

.txt-box .tab .custom-agent h4 {
    margin: 30px 0;
    color: red
}

.txt-box .tab .custom-agent .contact-box {
    margin: 15px auto 30px auto;
    font-size: 27px;
    padding: 20px;
    border: 2px solid red;
    width: 60%;
    color: red
}

.txt-box .tab .custom-agent .contact-box ul {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.txt-box .tab .custom-agent .contact-box ul li {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0
}

.txt-box .tab .custom-agent .contact-box ul li img {
    margin-right: 10px
}

.txt-box .tab .custom-agent .contact-box ul li p {
    margin-bottom: 0
}

.txt-box .tab .custom-agent .contact-box ul li:nth-child(2) {
    margin-left: 20px
}

.txt-box .tab .custom-agent .pic-box {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.txt-box .tab .custom-agent .pic-box img {
    width: 49%
}

.txt-box .tab .custom-agent .article-box {
    padding: 0 50px;
    text-align: left
}

.txt-box .tab .custom-agent .article-box.visual {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.txt-box .tab .custom-agent .article-box.visual .txt-wrap {
    width: 50%
}

.txt-box .tab .custom-agent .article-box.visual .visual-wrap {
    -webkit-transform: translateX(14px) translateY(20px) scale(1.25);
    -ms-transform: translateX(14px) translateY(20px) scale(1.25);
    transform: translateX(14px) translateY(20px) scale(1.25);
    width: 49%
}

.txt-box .tab .custom-agent .article-box.visual .visual-wrap img {
    width: 100%;
    height: auto
}

.txt-box .tab .custom-agent .article-box p {
    line-height: 1.5;
    margin-bottom: 0
}

.txt-box .tab .custom-agent p.foot {
    margin: 20px 0
}

.txt-box .tab .custom-agent .custom-agent-link {
    margin: auto;
    display: block;
    padding: 30px;
    width: 70%;
    border: 2px solid red;
    color: red
}

.txt-box .page-agent_tab_btn {
    text-transform: uppercase
}

.txt-box .sub-tit {
    display: table;
    margin: 10px 0;
    padding: 3px 10px;
    border-radius: 20px;
    background-color: #fff45c;
    color: red
}

.txt-box .agentUrlbyAgentid {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 12px;
    width: 60%;
    height: 48px;
    border: #ccc 1px solid;
    border-radius: 6px;
    background: #fff;
    color: #ccc;
    font-size: 15px;
    line-height: 48px
}

.txt-box .btn {
    display: inline-block;
    padding: 1em 2em;
    border-radius: 8px;
    background: #f01f20;
    color: #fff
}

.txt-box .btn:not(:last-child) {
    margin-right: 1em
}

.txt-box .focus-dark {
    color: #1431ce!important
}

.txt-box .txt-center {
    text-align: center
}

.txt-box table {
    background-color: #e1eaf5
}

.txt-box table td,
.txt-box table th {
    padding: 4px 8px;
    border: 1px solid #000;
    text-align: center
}

.txt-box table td p,
.txt-box table th p {
    margin: 0!important
}

.txt-box table th {
    background-color: #a5c1e2;
    color: #000
}

.txt-box .agent-title {
    padding: 35px 0;
    text-align: center
}

.txt-box hr {
    height: .8px;
    background-color: #20214b;
    color: #20214b
}

.txt-box .url_button {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    min-width: 90px;
    height: 35px;
    outline: 0;
    border: 0;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    text-transform: uppercase
}

.txt-box .url_button.button-green {
    color: #fff;
    background: #33b499;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #33b499), to(#258370));
    background: -o-linear-gradient(bottom, #33b499 0, #258370 100%);
    background: linear-gradient(to top, #33b499 0, #258370 100%)
}

.txt-box .url_button.button-blue {
    color: #fff;
    background: #015eea;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #015eea), to(#00c0fa));
    background: -o-linear-gradient(bottom, #015eea 0, #00c0fa 100%);
    background: linear-gradient(to top, #015eea 0, #00c0fa 100%)
}

.txt-box .txt-content2 {
    font-size: 25px!important
}

.txt-box .txt-content2 .f9 {
    font-size: .45em!important
}

.txt-box .txt-content2 .f10 {
    font-size: .525em!important
}

.txt-box .txt-content2 .f11 {
    font-size: .55em!important
}

.txt-box .txt-content2 .f12 {
    font-size: .6em!important
}

.txt-box .txt-content2 .f15 {
    color: #000;
    font-size: .75em!important
}

.txt-box .txt-content2 .txt-left {
    text-align: left!important
}

.txt-box .txt-content2 .no-border {
    background-color: transparent
}

.txt-box .txt-content2 .no-border td,
.txt-box .txt-content2 .no-border th {
    padding: 0!important;
    border: none!important
}

.txt-box .txt-content2 .heightline {
    color: #30a1e1
}

.txt-box .txt-content2 .opacity-0 {
    opacity: 0
}

.act-box .container .title {
    position: relative;
    overflow: hidden;
    width: 100%
}

.act-box .container .title .title-img {
    position: relative;
    left: 50%;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.act-box .container .viewer {
    padding: 50px 0;
    width: 100%;
    background: url(./../img/activity/bg.jpg) no-repeat center top;
    background-size: cover
}

.act-box .container .viewer .tab-box {
    margin-top: 40px
}

.act-box .container .viewer .tab-box .ctrl {
    width: 100%;
    border-bottom: 1px #2290d2 solid
}

.act-box .container .viewer .tab-box .ctrl .tab-button {
    position: relative;
    display: block;
    padding: 10px 46px;
    color: #999;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    cursor: pointer
}

.act-box .container .viewer .tab-box .ctrl .tab-button .icon {
    position: absolute;
    top: 50%;
    left: 46px;
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.act-box .container .viewer .tab-box .ctrl .tab-button .icon+p {
    padding-left: 40px
}

.act-box .container .viewer .tab-box .ctrl .tab-button.sys span {
    background-image: url(./../img/activity/icon-sys.png)
}

.act-box .container .viewer .tab-box .ctrl .tab-button.active,
.act-box .container .viewer .tab-box .ctrl .tab-button:hover {
    border-bottom: 2px solid #2290d2;
    color: #2290d2
}

.act-box .container .viewer .tab-box .main {
    margin: 15px 0;
    min-height: 30vh
}

.act-box .container .viewer .tab-box .main .content {
    display: block;
    padding: 15px
}

.act-box .container .viewer .tab-box .main .content .content-half {
    width: calc(50% - 15px)
}

.act-box .container .viewer .tab-box .main .content .content-full {
    width: 100%
}

.act-box .container .viewer .tab-box .main .item-box {
    margin-top: 30px;
    padding: 0
}

.act-box .container .viewer .tab-box .main .item-box:first-child {
    margin-top: 0
}

.cp-box .container .title {
    position: relative;
    overflow: hidden;
    width: 100%
}

.cp-box .container .title .title-img {
    position: relative;
    left: 50%;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.cp-box .container .viewer {
    padding: 50px 0;
    width: 100%;
    background: url(./../img/cp/bg.jpg) no-repeat center top;
    background-size: cover
}

.cp-box .container .viewer .tab-box {
    margin-top: 40px
}

.cp-box .container .viewer .tab-box .ctrl {
    width: 100%;
    border-bottom: 1px #2290d2 solid
}

.cp-box .container .viewer .tab-box .ctrl .tab-button {
    position: relative;
    display: block;
    padding: 10px 30px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    cursor: pointer
}

.cp-box .container .viewer .tab-box .ctrl .tab-button .icon {
    position: absolute;
    top: 50%;
    left: 30px;
    width: 35px;
    height: 35px;
    background-image: url(./../img/cp/icon-cp-icons.png);
    background-repeat: no-repeat;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.cp-box .container .viewer .tab-box .ctrl .tab-button .icon+p {
    padding-left: 40px
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.mb span {
    background-position: 0 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.ct span {
    background-position: -210px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.tci span {
    background-position: -245px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.xsvip span {
    background-position: -105px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.mg45 span {
    background-position: -70px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.st span {
    background-position: -35px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.mn span {
    background-position: -140px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.mt span {
    background-position: -175px 0
}

.cp-box .container .viewer .tab-box .ctrl .tab-button.active,
.cp-box .container .viewer .tab-box .ctrl .tab-button:hover {
    border-bottom: 2px solid #2290d2;
    color: #2290d2
}

.cp-box .container .viewer .tab-box .main {
    margin: 15px;
    min-height: 55vh
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp {
    position: relative;
    margin-top: 30px;
    margin-right: 20px;
    padding: 15px 10px;
    width: calc(25% - 15px);
    border-radius: 10px;
    background: #1671c4;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1671c4), to(#76f6fe));
    background: -o-linear-gradient(bottom, #1671c4 0, #76f6fe 100%);
    background: linear-gradient(to top, #1671c4 0, #76f6fe 100%);
    white-space: normal
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp:nth-child(4n) {
    margin-right: 0
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .ico {
    width: 120px;
    text-align: center
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .ico img {
    display: block;
    padding: 10px 10px 10px 10px;
    width: 100%
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .ico .name {
    width: 100%;
    color: #fff665;
    font-size: 22px
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info {
    position: relative;
    margin-left: 5px;
    padding-bottom: 50px;
    color: #fff;
    text-align: left
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info .issue,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info .no-issue {
    display: block;
    margin-top: 18px;
    width: 100%;
    font-size: 26px
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info .count,
.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info .no-count {
    display: block;
    margin-top: 3px;
    width: 100%;
    font-size: 16px
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp .info .btn {
    position: absolute;
    bottom: 5px;
    display: inline-block;
    padding: 8px 19px;
    border: 3px #fff solid;
    border-radius: 50px
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp:hover .btn {
    background: #1980ba
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp.wait {
    min-height: 180px
}

.cp-box .container .viewer .tab-box .main .game-box .gamebox-cp.wait .ico {
    width: 100%
}

.live-box {
    padding-top: 20px;
    min-height: 755px;
    background: url(../img/live/bg.jpg) #05466e no-repeat center;
    background-size: cover
}

.live-box .container {
    position: relative
}

.live-box .live-game .tabframe {
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
    padding: 20px;
    width: 100%;
    border-radius: 10px;
    background: rgba(36, 34, 67, .6)
}

.live-box .live-game .swiper-container {
    width: 1400px;
    height: 56px
}

.live-box .live-game .next,
.live-box .live-game .prev {
    top: 55%;
    height: 35px
}

.live-box .live-game .next:after,
.live-box .live-game .prev:after {
    width: 0;
    height: 0;
    border-style: solid;
    content: ''
}

.live-box .live-game .prev:after {
    border-width: 17.5px 17px 17.5px 0;
    border-color: transparent #007bff transparent transparent
}

.live-box .live-game .next:after {
    border-width: 17.5px 0 17.5px 17px;
    border-color: transparent transparent transparent #007bff
}

.live-box .live-game .tab_ctrl .tab_btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 10px;
    width: 161px;
    height: 56px;
    border: 1px solid #005d92;
    border-radius: 45px;
    background: #0d2f5f;
    color: #fff;
    text-transform: uppercase
}

.live-box .live-game .tab_ctrl .tab_btn p {
    font-size: 14px
}

.live-box .live-game .tab_ctrl .tab_btn.active {
    border: 1px solid #30a1e1;
    background: #30a1e1
}

.live-box .live-game .tab_ctrl .tab_btn .icon {
    margin-right: 5px
}

.live-box .live-game .tab_main .tab_item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.live-box .live-game .tab_main .tab_item .content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 50px
}

.live-box .live-game .tab_main .tab_item .pic-games {
    margin: 20px 0
}

.live-box .live-game .tab_main .tab_item .play {
    display: block;
    width: 220px;
    height: 60px;
    border: 3px solid #fff;
    border-radius: 30px;
    background: #2690d2;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    font-size: 28px;
    line-height: 60px
}

.live-box .live-game .tab_main .tab_item .play:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.dz-box {
    padding: 90px;
    background: url(../img/dz/bg.jpg) #05466e no-repeat top 20px center fixed;
    background-size: 100vw 100vh
}

.dz-box .container {
    max-width: 100%
}

.dz-box .title img {
    margin: -30px 90px 50px
}

.dz-box .tab-colum-dz .tab_ctrl {
    padding: 20px 20px 10px
}

.dz-box .tab-colum-dz .tab_ctrl {
    margin-bottom: 20px;
    height: 80px;
    border-radius: 10px;
    background: rgba(36, 34, 67, .59)
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn {
    position: relative;
    display: inline-block;
    margin-left: 7px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 44px;
    border-radius: 10px;
    background-color: #1f1d43;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    cursor: pointer
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn:first-child {
    margin-left: 0
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn p {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    padding: 0 18px 0 10px;
    height: 100%;
    text-align: left;
    line-height: 44px
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn p span {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn p img {
    margin: 0 6px;
    width: 100%;
    height: auto
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn.active,
.dz-box .tab-colum-dz .tab_ctrl .tab_btn:hover {
    background-color: #30a1e1
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn span.hot {
    position: absolute
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn span.hot.hotshow {
    top: -2px;
    right: -5px;
    display: block;
    width: 40px;
    height: 40px
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn span.hot.hotshow img {
    width: 100%
}

.dz-box .tab-colum-dz .tab_ctrl .tab_btn span.hot.hothide {
    display: none
}

.dz-box .tab-colum-dz .tab_main {
    padding: 20px 0 10px;
    min-height: 430px
}

.dz-box .game-box .gamebox-dz {
    margin: 0 0 30px;
    padding: 15px;
    width: 222px;
    height: 270px;
    border-radius: 10px;
    background-color: #1f1d43;
    text-align: center
}

.dz-box .game-box .gamebox-dz a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 192px;
    height: 192px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.dz-box .game-box .gamebox-dz a .logo {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    width: 182px;
    height: 182px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center
}

.dz-box .game-box .gamebox-dz a .logo img {
    margin: auto;
    width: 100%;
    height: 100%
}

.dz-box .game-box .gamebox-dz a .hover-name,
.dz-box .game-box .gamebox-dz a .play-btn {
    position: absolute;
    display: none
}

.dz-box .game-box .gamebox-dz p.name {
    display: block;
    margin: 10px auto 0;
    width: 182px;
    height: 30px;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;
    font-size: 18px;
    line-height: 16px
}

.dz-box .game-box .gamebox-dz:hover a .logo {
    opacity: .2
}

.dz-box .game-box .gamebox-dz:hover a:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    content: ""
}

.dz-box .game-box .gamebox-dz:hover a .hover-name {
    position: absolute;
    top: 35px;
    left: 50%;
    z-index: 4;
    display: block;
    width: 115px;
    color: #000;
    text-align: center;
    white-space: break-spaces;
    font-weight: 700;
    font-size: 17px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.dz-box .game-box .gamebox-dz:hover a .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    display: block;
    padding: 10px;
    width: 142px;
    height: 38px;
    border: 3px solid #fff;
    border-radius: 19px;
    background-color: #00c0fa;
    color: #fff;
    font-size: 20px;
    line-height: 10px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.sp-box {
    padding: 50px 0;
    width: 100%;
    background: url(./../img/sp/bg.jpg) no-repeat center top;
    background-size: cover
}

.sp-box .container {
    position: relative;
    overflow: hidden
}

.sp-box .container .title {
    padding-bottom: 50px;
    width: 100%;
    text-align: center
}

.sp-box .container .viewer {
    margin: 0 30px
}

.sp-box .container .viewer .gamebox-sp {
    position: relative;
    padding: 0 10px
}

.sp-box .container .viewer .gamebox-sp .pic {
    width: 100%
}

.sp-box .container .viewer .gamebox-sp .pic>img {
    display: block;
    width: 100%
}

.sp-box .container .viewer .gamebox-sp .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: none;
    margin-top: -25px;
    margin-left: -100px;
    width: 200px;
    height: 50px;
    border: 3px #fff solid;
    border-radius: 50px;
    background: #2290d2;
    color: #fff;
    text-align: center;
    font-size: 24px;
    line-height: 44px
}

.sp-box .container .viewer .gamebox-sp .gamebox-link {
    position: relative;
    display: block;
    border: 1px #ddd solid
}

.sp-box .container .viewer .gamebox-sp .gamebox-link::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    background: #00000082;
    content: ''
}

.sp-box .container .viewer .gamebox-sp .gamebox-link:hover::before {
    display: block
}

.sp-box .container .viewer .gamebox-sp .gamebox-link:hover .btn {
    display: block
}

.sp-box .container .swiper-button-next,
.sp-box .container .swiper-button-prev {
    top: calc(50% + 125px);
    outline: 0
}

.sp-box .container .swiper-button-next::after,
.sp-box .container .swiper-button-prev::after {
    color: #007bff;
    text-shadow: 2px 0 #007bff;
    font-weight: 900
}

.sp-box .container .swiper-button-prev {
    left: 0
}

.sp-box .container .swiper-button-next {
    right: 0
}

.by-box .container .title {
    position: relative;
    overflow: hidden;
    width: 100%
}

.by-box .container .title .title-img {
    position: relative;
    left: 50%;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.by-box .container .viewer {
    padding: 50px 0;
    width: 100%;
    background: url(./../img/by/bg.jpg) no-repeat center top;
    background-size: cover
}

.by-box .container .viewer .list .gamebox-by {
    margin-top: 30px;
    margin-right: 20px;
    width: calc(25% - 15px);
    border-radius: 10px;
    background: #1671c4;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #1671c4), to(#76f6fe));
    background: -o-linear-gradient(bottom, #1671c4 0, #76f6fe 100%);
    background: linear-gradient(to top, #1671c4 0, #76f6fe 100%)
}

.by-box .container .viewer .list .gamebox-by:last-child,
.by-box .container .viewer .list .gamebox-by:nth-child(4n) {
    margin-right: 0
}

.by-box .container .viewer .list .gamebox-by .gamebox-link {
    position: relative;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 15px 10px
}

.by-box .container .viewer .list .gamebox-by .gamebox-img {
    width: 160px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.by-box .container .viewer .list .gamebox-by .gamebox-img img {
    display: block;
    padding: 10px;
    width: 100%
}

.by-box .container .viewer .list .gamebox-by .gamebox-desp {
    margin-left: 10px;
    text-align: center
}

.by-box .container .viewer .list .gamebox-by .gamebox-desp span {
    display: block;
    margin-top: 35px;
    width: 100%;
    color: #fff665;
    font-size: 32px
}

.by-box .container .viewer .list .gamebox-by .gamebox-desp em {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 19px;
    border: 3px #fff solid;
    border-radius: 50px;
    color: #fff
}

.by-box .container .viewer .list .gamebox-by:hover .gamebox-desp em {
    background: #1980ba
}

.by-box .container .viewer .list .gamebox-by:hover .gamebox-img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.by-box .container .viewer .list .gamebox-by.wait .gamebox-desp {
    margin-left: 0
}

.by-box .container .viewer .list .gamebox-by.wait .gamebox-desp span {
    font-size: 28px;
    -webkit-transform: scaleX(.8);
    -ms-transform: scaleX(.8);
    transform: scaleX(.8)
}

.qp-box {
    overflow: hidden;
    min-height: 55vh;
    width: 100%;
    background: url(../img/qp/bg.jpg) no-repeat center top;
    background-attachment: fixed;
    background-size: cover
}

.qp-box .container {
    position: relative;
    min-height: 740px
}

.qp-box .qp-game .tab_ctrl {
    position: relative;
    z-index: 2;
    margin: 0 0 30px 40%;
    padding-top: 30px
}

.qp-box .qp-game .tab_btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
    width: 210px;
    height: 70px;
    background: url(../img/qp/btn-bg.png) no-repeat center/contain;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px
}

.qp-box .qp-game .tab_btn.active,
.qp-box .qp-game .tab_btn:hover {
    background-image: url(../img/qp/btn-bg-hover.png);
    color: #eff03f
}

.qp-box .qp-game .tab_btn:not(:last-child) {
    margin-right: 20px
}

.qp-box .qp-game .tab_btn .icon {
    margin-right: 10px
}

.qp-box .qp-game .tab_item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.qp-box .qp-game .tab_item .pic {
    position: absolute;
    bottom: 0;
    left: 0
}

.qp-box .qp-game .tab_item .pic.pic-cgqp {
    left: -75px
}

.qp-box .qp-game .tab_item .content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 100px;
    height: 590px
}

.qp-box .qp-game .tab_item .content .img-title img {
    display: block;
    margin: auto;
    width: 85%
}

.qp-box .qp-game .tab_item .content .items {
    margin: 50px 0;
    width: 85%
}

.qp-box .qp-game .tab_item .content .img-corner {
    position: absolute;
    right: -200px;
    bottom: 0
}

.qp-box .qp-game .tab_item .content .play {
    width: 230px;
    height: 65px;
    border: 2px solid #659cea;
    border-radius: 25px;
    background: -webkit-gradient(linear, left top, left bottom, from(#0479dd), to(#6471d8));
    background: -o-linear-gradient(top, #0479dd, #6471d8);
    background: linear-gradient(to bottom, #0479dd, #6471d8);
    color: #fff;
    text-align: center;
    font-size: 24px;
    line-height: 65px
}

.qp-box .qp-game .tab_item .content .play:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.qp-box .qp-game .none {
    display: block;
    margin: auto
}

.dj-box {
    overflow: hidden;
    padding: 50px 0;
    width: 100%;
    background: url(../img/dj/bg.jpg) no-repeat center top;
    background-size: cover
}

.dj-box .container {
    position: relative
}

.dj-box .container .title {
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
    width: 100%
}

.dj-box .container .title .title-img {
    position: relative;
    left: 50%;
    display: block;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.dj-box .container .list {
    position: relative;
    margin: 0 auto
}

.dj-box .container .list .gamebox-dj {
    position: relative;
    padding: 15px 10px;
    width: calc(50% - 15px);
    text-align: center
}

.dj-box .container .list .gamebox-dj .gamebox-link {
    display: block
}

.dj-box .container .list .gamebox-dj .pic {
    position: relative
}

.dj-box .container .list .gamebox-dj .btn {
    position: absolute;
    bottom: 50px;
    left: 50%;
    display: block;
    margin-left: -100px;
    width: 200px;
    height: 50px;
    border: 3px #fff solid;
    border-radius: 50px;
    background: #2290d2;
    color: #fff;
    text-align: center;
    font-size: 24px;
    line-height: 44px
}

@-webkit-keyframes game-float {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0)
    }
}

@keyframes game-float {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(0, -2%, 0);
        transform: translate3d(0, -2%, 0)
    }
}

@-webkit-keyframes game-float-l {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(0, -8%, 0);
        transform: translate3d(0, -8%, 0)
    }
}

@keyframes game-float-l {
    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40% {
        -webkit-transform: translate3d(0, -8%, 0);
        transform: translate3d(0, -8%, 0)
    }
}

.chatRoom {
    position: fixed;
    right: 0;
    bottom: 50px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: url(../img/chat/icon-chat.png) no-repeat center center;
    background-size: contain;
    cursor: pointer
}

.chatRoom.active {
    background: url(../img/chat/icon-chat-active.png) no-repeat center center;
    background-size: contain
}

.chat-entry {
    background: url(../img/chat/icon-chat.png) no-repeat 50%!important
}

.chat-entry.active {
    background: url(../img/chat/icon-chat-active.png) no-repeat 50%!important
}

.layui-layer.layui-layer-iframe {
    overflow: hidden;
    border-radius: 10px
}

.icon p {
    color: #000;
}